<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrapper{
    /* 最小宽度 */
    min-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.wrapper ul{
    display: inline-block;
}
.wrapper ul::after{
    content: "";
    clear: both;
    display: block;
}
.wrapper li{
    float: left;
}
.wrapper li .item{
    width: 200px;
    margin: 0 5px 10px;
    padding: 10px;
    border: 1px solid #ccc;
}
.wrapper li .item .image{
    width: 200px;
}
.wrapper li .item .image img{
    width: 200px;
}
.wrapper .loading{
    font-size: 30px;
    font-weight: bolder;
    color: #ccc;
}


    </style>
</head>
<body>
    <div class="wrapper">
         <ul>
             <li>
                 <div class="item">
                     <div class="image">
                         <img src="img/1.png" alt="">
                         <p>我是title</p>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="item">
                     <div class="image">
                         <img src="img/2.png" alt="">
                         <p>我是title</p>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="item">
                     <div class="image">
                         <img src="img/3.jpg" alt="">
                         <p>我是title</p>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="item">
                     <div class="image">
                         <img src="img/4.jpg" alt="">
                         <p>我是title</p>
                     </div>
                 </div>
             </li>
         </ul>
         <div class="loading">Loading...</div>
     </div>
     <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
     <script>
     var num = 1;
var flag = false;//加锁
var oLi = $('li');
getData();
function getData(){
    if(!flag){
        flag = true;
        $.ajax({
            type:'GET',
            url:'https://www.shenxuanche.com/json/news_list.json',
            success:addDom,
            beforeSend:function(){
                $('.loading').show();//请求成功前显示loading
            },
            error:function(){
                console.log('error');
            }
        });
    }
}
function addDom(data){
    $('.loading').hide();//请求成功后隐藏loading
    var oJSON = (new Function('return ' + data))();//标准JSON数据格式解释方法
    //var oJSON = eval("(" + data + ")");//数据不是标准JSON格式，只能采用eval来解析
    var dataList = oJSON.imgs;
    dataList.pop();//清除最后一个空数据
    console.log(dataList);//在控制台打印数据，查看数据是否跟需求一致
    if(dataList.length > 0){
        //拿到数据后，遍历数据插入结构
        dataList.forEach(function(ele,index){
            var iDiv = $('<div class="item"></div>');
            var imgBox = $('<div class="image"></div>');
            var oImg = new Image();
            var oP = $('<p></p>');
            oP.text(ele.title);
            oImg.src = ele.imageUrl;
            //当图片获取到了以后插入页面
            oImg.onload = function(){
                imgBox.append(oImg);
                iDiv.append(imgBox).append(oP);
                //获取最短的li的索引
                var index = getMinList(oLi);
                $(oLi[index]).append(iDiv);
            }
        });
    }
    num ++;//这个数据是用来记录页的，之前的一个数据可以实现分页请求，
    flag = false;//结构添加完成后将锁开启
}
//获取最短li的索引函数
function getMinList(dom){
    var minHeight = parseInt($(dom[0]).css('height'));
    var index = 0;
    for(var i = 1; i < oLi.length; i++){
        var height = parseInt($(dom[i]).css('height'));
        if(height < minHeight){
            minHeight = height;
            index = i;
        }
    }
    return index;
}
//往下滑动时
//当滚动条的位置加上窗口高度大于最短的li，再次加载
$(window).scroll(function() {
    var scrollHeight = $(window).scrollTop();//获取滚动条位置
    var clientHeight = $(window).height();//获取视窗高度
    var minLiH = parseInt($(oLi[getMinList(oLi)]).css('height'));//获取最短列的高度
    if(scrollHeight + clientHeight > minLiH){//当出现空白区域时调用网络请求加载数据
        getData();
    }
});
     </script>
</body>
</html>